<template>
  <div class="products-page">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">{{ $t('common.home') }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('products.breadcrumb') }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ $t('products.title') }}</h1>
        <p class="page-subtitle">{{ $t('products.subtitle') }}</p>
      </div>
    </div>

    <div class="page-content">
      <div class="container">
        <!-- 产品分类 -->
        <div class="category-section">
          <h2 class="section-title">{{ $t('products.categories.title') }}</h2>
          <div class="category-tabs">
            <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
              <el-tab-pane 
                v-for="category in categories" 
                :key="category.id"
                :label="$t(category.nameKey)" 
                :name="category.id"
              >
                <div class="category-content">
                  <div class="category-description">
                    <p>{{ $t(category.descriptionKey) }}</p>
                  </div>
                  
                  <div class="products-grid">
                    <div 
                      class="product-card" 
                      v-for="product in category.products" 
                      :key="product.id"
                      @click="viewProduct(product)"
                    >
                      <div class="product-image">
                        <img :src="product.image" :alt="$t(product.nameKey)" @error="handleImageError">
                      </div>
                      <div class="product-content">
                        <h3 class="product-name">{{ $t(product.nameKey) }}</h3>
                        <p class="product-desc">{{ $t(product.descriptionKey) }}</p>
                        <div class="product-features">
                          <span 
                            v-for="feature in product.features" 
                            :key="feature" 
                            class="feature-tag"
                          >
                            {{ $t(feature) }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 热门产品 -->
        <div class="hot-products-section">
          <h2 class="section-title">{{ $t('products.hotProducts.title') }}</h2>
          <div class="hot-products-grid">
            <div 
              class="hot-product-card" 
              v-for="product in hotProducts" 
              :key="product.id"
              @click="viewProduct(product)"
            >
              <div class="hot-product-image">
                <img :src="product.image" :alt="product.name" @error="handleImageError">
                <div class="hot-badge">{{ $t('products.hotProducts.hot') }}</div>
              </div>
              <div class="hot-product-content">
                <h3 class="hot-product-name">{{ $t(product.nameKey) }}</h3>
                <p class="hot-product-desc">{{ $t(product.descriptionKey) }}</p>
                <div class="hot-product-stats">
                  <span class="stat-item">
                    <i class="el-icon-view"></i>
                    {{ product.views }}{{ $t('products.hotProducts.views') }}
                  </span>
                  <span class="stat-item">
                    <i class="el-icon-star-on"></i>
                    {{ product.rating }}{{ $t('products.hotProducts.rating') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 技术优势 -->
        <div class="tech-advantages-section">
          <h2 class="section-title">{{ $t('products.advantages.title') }}</h2>
          <div class="advantages-grid">
            <div class="advantage-card" v-for="advantage in advantages" :key="advantage.id">
              <div class="advantage-icon">
                <i :class="advantage.icon"></i>
              </div>
              <h3 class="advantage-title">{{ $t(advantage.titleKey) }}</h3>
              <p class="advantage-desc">{{ $t(advantage.descriptionKey) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      activeCategory: 'frontend',
      categories: [
        {
          id: 'frontend',
          nameKey: 'products.categories.frontend',
          descriptionKey: 'products.categoryDescriptions.frontend',
          products: [
                         {
               id: 1,
               nameKey: 'products.productNames.fixedCamera',
               descriptionKey: 'products.productDescriptions.fixedCamera',
               image: 'https://picsum.photos/400/300?random=7',
               features: ['products.productFeatures.ultraHd', 'products.productFeatures.nightVisionFunc', 'products.productFeatures.waterproofDustproof']
             },
             {
               id: 2,
               nameKey: 'products.productNames.domeCamera',
               descriptionKey: 'products.productDescriptions.domeCamera',
               image: 'https://picsum.photos/400/300?random=8',
               features: ['products.productFeatures.rotation360', 'products.productFeatures.ptzControl', 'products.productFeatures.intelligentTracking']
             },
             {
               id: 3,
               nameKey: 'products.productNames.ptzCamera',
               descriptionKey: 'products.productDescriptions.ptzCamera',
               image: 'https://picsum.photos/400/300?random=9',
               features: ['products.productFeatures.wideRange', 'products.productFeatures.multipleInstall', 'products.productFeatures.highZoom']
             }
          ]
        },
        {
          id: 'backend',
          nameKey: 'products.categories.backend',
          descriptionKey: 'products.categoryDescriptions.backend',
          products: [
                         {
               id: 4,
               nameKey: 'products.productNames.storageDevice',
               descriptionKey: 'products.productDescriptions.storageDevice',
               image: 'https://picsum.photos/400/300?random=10',
               features: ['products.productFeatures.largeCapacity', 'products.productFeatures.highPerformance', 'products.productFeatures.raidProtection']
             },
             {
               id: 5,
               nameKey: 'products.productNames.managementPlatform',
               descriptionKey: 'products.productDescriptions.managementPlatform',
               image: 'https://picsum.photos/400/300?random=11',
               features: ['products.productFeatures.unifiedManagement', 'products.productFeatures.intelligentAnalysis', 'products.productFeatures.multiLevelAuth']
             }
          ]
        },
        {
          id: 'software',
          nameKey: 'products.categories.software',
          descriptionKey: 'products.categoryDescriptions.software',
          products: [
                         {
               id: 6,
               nameKey: 'products.productNames.basicSoftware',
               descriptionKey: 'products.productDescriptions.basicSoftware',
               image: 'https://picsum.photos/400/300?random=12',
               features: ['products.productFeatures.basicSupport', 'products.productFeatures.stableReliable', 'products.productFeatures.easyExtension']
             },
             {
               id: 7,
               nameKey: 'products.productNames.industrySoftware',
               descriptionKey: 'products.productDescriptions.industrySoftware',
               image: 'https://picsum.photos/400/300?random=13',
               features: ['products.productFeatures.industryProfessional', 'products.productFeatures.completeFunction', 'products.productFeatures.customization']
             }
          ]
        }
      ],
             hotProducts: [
         {
           id: 1,
           nameKey: 'products.productNames.aiCamera',
           descriptionKey: 'products.productDescriptions.aiCamera',
           image: 'https://picsum.photos/400/300?random=14',
           views: 12580,
           rating: 4.8
         },
         {
           id: 2,
           nameKey: 'products.productNames.panoramaSystem',
           descriptionKey: 'products.productDescriptions.panoramaSystem',
           image: 'https://picsum.photos/400/300?random=15',
           views: 9876,
           rating: 4.7
         },
         {
           id: 3,
           nameKey: 'products.productNames.aiPlatform',
           descriptionKey: 'products.productDescriptions.aiPlatform',
           image: 'https://picsum.photos/400/300?random=16',
           views: 7564,
           rating: 4.9
         }
       ],
      advantages: [
        {
          id: 1,
          titleKey: 'products.advantages.aiTechnology',
          descriptionKey: 'products.advantages.aiDescription',
          icon: 'el-icon-cpu'
        },
        {
          id: 2,
          titleKey: 'products.advantages.completeProductLine',
          descriptionKey: 'products.advantages.completeDescription',
          icon: 'el-icon-connection'
        },
        {
          id: 3,
          titleKey: 'products.advantages.qualityAssurance',
          descriptionKey: 'products.advantages.qualityDescription',
          icon: 'el-icon-medal'
        },
        {
          id: 4,
          titleKey: 'products.advantages.serviceSupport',
          descriptionKey: 'products.advantages.serviceDescription',
          icon: 'el-icon-service'
        }
      ]
    }
  },
  methods: {
    handleCategoryChange(tab) {
      this.activeCategory = tab.name
    },
         viewProduct(product) {
       this.$router.push(`/product/${product.id}`)
     },
    handleImageError(e) {
      e.target.style.display = 'none'
    }
  }
}
</script>

<style lang="scss" scoped>
.products-page {
  .breadcrumb-section {
    background: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    
    .el-breadcrumb {
      font-size: 14px;
    }
  }

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
    
    .page-title {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    
    .page-subtitle {
      font-size: 20px;
      opacity: 0.9;
    }
  }

  .page-content {
    padding: 60px 0;
    
    .section-title {
      font-size: 32px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 40px;
      text-align: center;
    }
  }

  .category-section {
    margin-bottom: 80px;
    
    .category-tabs {
      .el-tabs__nav-wrap {
        margin-bottom: 30px;
      }
      
      .category-content {
        .category-description {
          text-align: center;
          margin-bottom: 40px;
          
          p {
            font-size: 16px;
            color: #666;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
          }
        }
        
        .products-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 30px;
        }
        
        .product-card {
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
          }
          
          .product-image {
            height: 200px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .product-content {
            padding: 20px;
            
            .product-name {
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 10px;
              color: #2c3e50;
            }
            
            .product-desc {
              color: #666;
              margin-bottom: 15px;
              line-height: 1.5;
            }
            
            .product-features {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              
              .feature-tag {
                background: #e1f3ff;
                color: #409eff;
                padding: 4px 8px;
                border-radius: 12px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }

  .hot-products-section {
    margin-bottom: 80px;
    
    .hot-products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
    }
    
    .hot-product-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      }
      
      .hot-product-image {
        height: 200px;
        position: relative;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .hot-badge {
          position: absolute;
          top: 15px;
          right: 15px;
          background: #ff6b6b;
          color: white;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      
      .hot-product-content {
        padding: 20px;
        
        .hot-product-name {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #2c3e50;
        }
        
        .hot-product-desc {
          color: #666;
          margin-bottom: 15px;
          line-height: 1.5;
        }
        
        .hot-product-stats {
          display: flex;
          gap: 20px;
          
          .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #999;
            font-size: 14px;
            
            i {
              color: #409eff;
            }
          }
        }
      }
    }
  }

  .tech-advantages-section {
    .advantages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
    }
    
    .advantage-card {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .advantage-icon {
        font-size: 48px;
        color: #409eff;
        margin-bottom: 20px;
      }
      
      .advantage-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #2c3e50;
      }
      
      .advantage-desc {
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

@media (max-width: 768px) {
  .products-page {
    .breadcrumb-section {
      padding: 10px 0;
    }

    .page-header {
      padding: 60px 0;
      
      .page-title {
        font-size: 32px;
      }
      
      .page-subtitle {
        font-size: 16px;
      }
    }
    
    .page-content {
      padding: 40px 0;
      
      .section-title {
        font-size: 24px;
      }
    }
    
    .category-section {
      margin-bottom: 60px;
      
      .category-tabs {
        .category-content {
          .products-grid {
            grid-template-columns: 1fr;
          }
        }
      }
    }
    
    .hot-products-section {
      margin-bottom: 60px;
      
      .hot-products-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .tech-advantages-section {
      .advantages-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>

